<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>今日生机论坛--注册页面</title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="icon" href="../favicon.ico" type="image/gif">

		<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
		<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
		<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
		<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
		<style>
			body {
				background: url(../img/backgroundPicture/backgroundPicture01.jpeg) no-repeat;
				background-size: cover;
			}
		</style>
	</head>
	<body>

		<div class="container">
			<div class="row">
				<div class="offset-4 col-4 border rounded bg-white shadow-lg mt-5 mb-5">
					<div>
						<a href="#"><img src="../img/logo/logo.png"></a>
					</div>
					<form role="form">
						<div class="form-group">
							<label>密码</label>
							<input type="password" class="form-control" placeholder="请输入密码" name="userPassword">
						</div>
						<div class="form-group">
							<label>确认密码</label>
							<input type="password" class="form-control" placeholder="请再次输入密码">
						</div>
						<div class="form-group">
							<label>邮箱</label>
							<input type="email" class="form-control" placeholder="请输入邮箱" name="userEmail">
						</div>
						<div class="form-group">
							<label>选择您的头像</label>
							<input type="file" name="userPhoto">
						</div>
						<div class="form-group">
							<div>选择出生日期</div>
							<input type="date" value="2000-12-12" name="userBirthday">
						</div>
						<div class="form-group">
							<div>电话</div>
							<input type="tel" placeholder="请输入电话" class="form-control" name="userNumber">
						</div>
						<div class="form-group">
							<div>昵称</div>
							<input type="text" placeholder="请输入昵称" class="form-control" name="userNickname">
						</div>
						<div class="form-group">
							<div>性别</div>
							<label>
								<input type="radio" name="userSex" value="男" checked>男
							</label>
							&nbsp;
							<label>
								<input type="radio" name="userSex" value="女">女
							</label>
						</div>
						<div class="form-group text-center">
							<input type="submit" class="btn btn-primary" value="注册">&emsp;&emsp;
							<a href="login.html" class="btn btn-danger">去登录</a>
						</div>
					</form>
				</div>
			</div>
		</div>
		<script>
			$('form').submit(function (e) {
				// 阻止表单的提交和页面的跳转
				e.preventDefault();
				$.ajax({
					url: '/user/logon',
					method: "POST",
					data: JSON.stringify(form2Json($("form").serialize())),
					contentType: "application/json",
					success: function (returnObject) {
						if (returnObject.code=="1") {
							window.location.href = "/user/logon";
							// alert("success");
						} else {
							alert(returnObject.message + ",请重新登录！");
						}
					}
				});

			});
			// ?username=tom&password=tom转{"username":"tom","password":"tom"}格式
			function form2Json(str) {
				var arr = str.split('&');
				var obj = {};
				for (var i = 0; i < arr.length; i++) {
					var bits = arr[i].split('=');
					obj[bits[0]] = bits[1];
				}
				str = '';
				for (key in obj) {
					str += key + '=' + obj[key] + '&';
				}
				str = str.slice(0, str.length - 1);
				return obj;
			}
		</script>
	</body>
</html>
